<template>
    <div class="articleDetail">
        <el-card class="box-card">
            <el-row class="title flex-row ite-c">
                <el-col :span="12">
                    <el-tag
                        size="mini"
                        effect="dark"
                        :color="detail.tag_color"
                    >{{ detail.tag_name }}</el-tag>
                    <span class="name">{{ detail.title }}</span>
                </el-col>

                <el-col :span="12" class="flex-row jus-e">
                    <el-button
                        v-if="user.is_staff"
                        size="small"
                        type="primary"
                        @click="downloadMd"
                    >下载</el-button>
                </el-col>
            </el-row>

            <el-row type="flex" justify="space-between">
                <el-col :span="12">
                    <el-avatar :src="detail.author_image"></el-avatar>
                    <span class="user_name" >{{ detail.author }}</span>
                </el-col>
                <el-col :span="12">
                    <div class="icon_box">
                        <el-link icon="el-icon-chat-dot-square" type="info" @click="goReply(null)">{{ commentCount }}</el-link>
                        <el-link icon="el-icon-view" type="info">{{ detail.clicks }}</el-link>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <com-mavon-editor
            ref="comMavonEditor"
            :toolbarsFlag="false"
            :subfield="false"
            defaultOpen="preview"
            class="mapginTop"
        />

        <el-card class="box-card mapginTop">
            <div slot="header" class="title">评论区</div>

            <template v-if="comment.length>0">
                <div
                    class="comment_box"
                    v-for="item in comment"
                    :key="item.comment_id"
                >
                    <div class="flex-row ite-c jus-b">
                        <div class="comment_info">
                            <el-avatar :src="item.author_image"></el-avatar>
                            <span class="user_name">{{ item.author }}</span>
                            <span class="createTime">{{ item.create_time }}</span>
                        </div>
                        <div class="comment_btn">
                            <el-link type="primary" @click="goReply(item)">回复</el-link>
                            <el-link
                                type="primary"
                                v-show="item.child.length>0"
                                @click="openComment(item)"
                            >{{ item.offon?"收起回复":" 查看回复("+item.child.length+")" }}
                            </el-link>
                        </div>
                    </div>
                    <div class="comment_con" v-html="item.content"></div>

                    <div
                        v-show="item.offon"
                        v-for="cItem in item.child"
                        class="comment_list"
                    >
                        <div class="flex-row ite-c jus-b">
                            <div class="comment_info">
                                <el-avatar :src="cItem.author_image"></el-avatar>
                                <span class="user_name">{{ cItem.author }}</span>
                                <span class="createTime">{{ cItem.create_time }}</span>
                            </div>
<!--                            <div class="comment_btn">-->
<!--                                <el-link type="primary">回复</el-link>-->
<!--                            </div>-->
                        </div>
                        <div class="comment_con" v-html="cItem.content"></div>
                    </div>
                </div>
            </template>
            <el-divider v-else>暂无评论</el-divider>

            <el-row class="flex-row ite-c jus-c" style="margin-top: 20px;">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="commentTotal"
                    :current-page="commentPage"
                    @current-change="changePage"
                    @prev-click="changePage"
                    @next-click="changePage"
                    hide-on-single-page
                ></el-pagination>
            </el-row>

        </el-card>

        <el-card class="box-card mapginTop" v-if="$store.getters['user/getToken']">
            <el-form
                label-position="top"
                label-width="80px"
                :model="formLabelAlign"
                @submit.native.prevent
                ref="ruleForm"
            >
                <el-form-item prop="content" :error="formErr.conErr">
                    <el-input
                        ref="comEditor"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入评论"
                        v-model="formLabelAlign.content"
                        id="comEditor"
                    ></el-input>
                </el-form-item>

                <el-form-item prop="image_text" :error="formErr.codeErr">
                    <el-input
                        v-model="formLabelAlign.image_text"
                        placeholder="验证码"
                        minlength="4"
                        maxlength="4"
                        style="width: 350px;"
                        @keyup.enter.native="addComment"
                    >
                        <img
                            slot="append"
                            :src="'data:image/jpg;base64,'+code_image"
                            alt="图片验证码"
                            class="code_image"
                            @click="getImgCode"
                        />
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addComment">立即回复</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {articleDetail, commentList, commentAdd} from '@/api/article'
    import {imageCode} from '@/api/user'
    import {commentRules} from "@forms/article";
    import { mapGetters } from 'vuex'

    import comMavonEditor from '@/components/comMavonEditor/comMavonEditor'

    export default {
        name: "articleDetail",
        components: {
            comMavonEditor,
        },
        data() {
            return {
                detail: {},
                articleId: '',
                comment: [],
                commentPage: 1,
                commentTotal: 0,
                commentCount: 0,
                formLabelAlign: {
                    content: '',
                    image_text: '',
                },
                rules: commentRules,
                code_image: '',
                image_uuid: '',
                parent_id:null,
                formErr: {
                    conErr: '',
                    codeErr: '',
                }
            }
        },
        // watch: {
        //     'formLabelAlign.content'(newValue, oldValue) {
        //         if(newValue=='')this.articleId = null
        //     }
        // },
        mounted() {
            this.articleId = this.$route.params.articleId
            this.getDetail()
            this.getCommentList()
            this.getImgCode()
        },
        computed: {
            // 获取用户数据
            ...mapGetters({
                user: 'user/getUser',
            }),
        },
        methods: {
            // 下载md文件
            downloadMd(){
                let ele = document.createElement('a');
                //设置下载文件名
                ele.download = `${this.detail.title}.md`;
                //隐藏元素
                ele.style.display = "none";
                //字符内容转变成blob地址
                let blob = new Blob([this.detail.content]);
                ele.href = URL.createObjectURL(blob);
                ele.click();
            },
            // 获取图片验证码
            getImgCode() {
                imageCode()
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.image_uuid = res.data.image_uuid
                            this.code_image = res.data.image
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            getDetail() {
                articleDetail(this.articleId)
                    .then(res => {
                        if (Number(res.code) === 0) {
                            // console.log(res.data)
                            this.$refs.comMavonEditor.setCon(res.data.content)
                            this.detail = res.data
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 页数修改
            changePage(pagenum) {
                this.commentPage = pagenum
                this.getCommentList()
            },
            getCommentList() {
                let params = {
                    pagesize: 5,
                    article_id: this.articleId
                }

                commentList(params)
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.comment = res.data
                            this.commentPage = res.page
                            this.commentTotal = res.count
                            this.commentCount = res.all_count
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 打开评论
            openComment(item) {
                this.$set(item, 'offon', !item.offon)
            },
            // 添加评论
            addComment() {
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) return false
                    let formLabelAlign = this.formLabelAlign

                    let params = {
                        content: formLabelAlign.content,
                        image_text: formLabelAlign.image_text,
                        image_uuid: this.image_uuid,
                        article_id: this.articleId,
                        parent_id:this.parent_id,
                    }

                    commentAdd(params)
                        .then(res => {
                            this.parent_id = null
                            // console.log(res)
                            if (Number(res.code) === 0) {
                                this.clearData()
                                this.getCommentList()
                                this.$Alert({message: res.msg, type: 'success'})
                            } else {
                                if(/验证码/.test(res.msg)){
                                    this.formErr.codeErr = res.msg
                                }else if(/内容/.test(res.msg)){
                                    this.formErr.conErr = res.msg
                                }else{
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            }
                            this.getImgCode()
                        })
                })
            },
            // 重置数据
            clearData() {
                let formLabelAlign = this.formLabelAlign
                formLabelAlign.content = ''
                formLabelAlign.image_text = ''
            },
            // 跳转描点
            goReply(item) {
                // 检测登录
                if(!this.$store.getters['user/getToken']){
                    this.$Alert({ message:'请登陆后再评论',type:'warning' })
                    return false
                }

                // 跳转回复框
                this.$el.querySelector('#comEditor').scrollIntoView()
                this.$refs.comEditor.focus()

                // 指定人员回复
                if(!item)return false
                this.formLabelAlign.content = `@${item.author}：`
                this.parent_id = item.comment_id
            }
        },
    }
</script>

<style scoped lang="less">
    .title {
        font-size: 24px;
        .name{
            margin-left: 10px;
            font-weight: 700;
            color: #303133;
        }
    }

    .subTitle {
        font-size: 16px;
        color: #909399;
    }

    .digest {
        color: #606266;
        text-indent: 20px;
    }

    .user_name {
        font-size: 18px;
        margin-left: 5px;
        margin-right: 10px;
        font-weight: bold;
        color:#333;
    }

    .el-row + .el-row {
        margin-top: 15px;
    }

    .article_image {
        width: 200px;
        height: 200px;
    }

    .article_content {
        padding: 16px;
        overflow: auto;
        line-height: 1.45;
        background-color: #f7f7f7;
        border-radius: 3px;
        border-left: 5px solid #ddd;
        font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;

        table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        table td,
        table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }

        /* blockquote 样式 */

        blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        /* code 样式 */

        code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
        }

        pre code {
            display: block;
        }

        /* ul ol 样式 */

        ul, ol {
            margin: 10px 0 10px 20px;
        }
    }

    .icon_box {
        text-align: right;
        color: #909399;

        .el-link {
            font-size: 16px;
            margin-left: 15px;
        }
    }

    .mapginTop{
         margin-top: 20px;
     }

    .box-card {
        .comment_box {
            margin-bottom: 12px;
        }

        .comment_box + .comment_box {
            padding-top: 12px;
            border-top: 1px dashed #e0e0e0;
        }

        .comment_info {


            .reply_txt {
                color: #909399;
            }

            .el-avatar {
                width: 30px;
                height: 30px;
            }

            .user_name {
                font-size: 16px;
            }

            .createTime {
                font-size: 12px;
                color: #999;
            }
        }

        .comment_btn {
            text-align: right;

            .el-link {
                font-size: 12px;
                margin-left: 15px;
            }
        }

        .comment_con {
            color: #606266;
            font-size: 14px;
            padding-left: 35px;
        }

        .comment_list {
            padding-left: 8px;
            border-left: 4px solid #c5c5c5;
            margin-left: 35px;
            margin-top: 10px;
        }

        .code_image {
            height: 38px;
            cursor: pointer;
        }
    }
</style>
